.right_info {
  z-index: 100;
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  right: 0;
  bottom: 15%;
  min-width: 11rem;
  height: 2rem;
  transition: all .8s;

  .top_title,
  .bottom_uid {
    position: relative;
    left: 2.3rem;
    font-size: .42rem;
    opacity: 1;
  }

  .bottom_uid {
    top: 0.1rem;
  }

  .name {
    font-family: 'NWB';
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 1rem;
    font-size: 1rem;
    border-bottom: .08rem solid #000;
    white-space: nowrap;

    &::before {
      content: "";
      display: block;
      width: 2rem;
      height: 100%;
      margin-right: .2rem;
      background-color: #000;
    }
  }
}

@media screen and (max-width: 992px) {
  .mobile {
    .right_info {
      width: 100%;
      bottom: 15%;
    }
  }
}

.unactive {
  .right_info {
    transform: translateX(100%);
  }
}